<template>
    <div>
        <el-dialog title="下载格式选择" :visible.sync="dialogVisible" :width="downloadWidth" v-dialogDrag :modal="false">
            <div class="download_item">
                <el-checkbox-group v-model="menuConfigForm.downloadItem">
                    <el-checkbox label="JPG下载"></el-checkbox>
                    <el-checkbox label="PNG下载"></el-checkbox>
                    <el-checkbox label="结果文件"></el-checkbox>
                    <el-checkbox label="SVG下载"></el-checkbox>
                    <el-checkbox label="PDF下载"></el-checkbox>
                    <el-checkbox label="结果表格"></el-checkbox>
                </el-checkbox-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="downloadAdd">确 定</el-button>
            </span>
        </el-dialog>
        <el-form ref="menuConfigForm" :model="menuConfigForm" label-width="100px" :rules="menuRules">
            <div class="menu_config">
                <div class="picture_view">
                    <el-form-item label="工具名" prop="title">
                        <el-input v-model.trim="menuConfigForm.title" style="width: 150px;"></el-input>
                        <el-button type="primary" size="mini" style="padding: 8px 8px;margin-left: 20px;"
                            @click="dialogVisible = true">下载格式选择</el-button>
                        <span class="downloadItems">{{ downloadItems }}</span>
                    </el-form-item>
                    <div class="image_view">
                        <div class="scriptUpload">
                            脚本上传:
                        </div>
                        <div class="upload_script">
                            <el-upload class="upload-demo" :show-file-list="true" action="" :on-remove="handleRemove"
                                :http-request="handleUpload" :before-remove="beforeRemove" multiple v-model="uploadList"
                                :file-list="fileList" :on-preview="onPreview">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                            <el-button size="small" class="script" @click="downloadScript"
                                :disabled="!fileList.length">下载脚本</el-button>
                        </div>
                        <div class="input_script">
                            执行命令：
                            <el-input v-model="menuConfigForm.scriptCommand" type="textarea" placeholder="请输入脚本执行命令"
                                style="width: 300px;" :rows="3"></el-input>
                        </div>
                    </div>
                    <div class="example_view">

                        <div class="documentRadio">
                            <el-radio-group v-model.trim="documentRadio">
                                <div class="documentRadio_items">
                                    <el-radio label="select" style="width: 200px;margin: 0 0 10px  80px;">下拉组件</el-radio>
                                    <el-radio label="selectMultiple"
                                        style="width: 200px;margin: 0 0 10px  80px;">下拉组件（双）</el-radio>
                                    <el-radio label="color" style="width: 200px;margin: 0 0 10px  80px;">颜色选择器（单）</el-radio>
                                    <el-radio label="input" style="width: 200px;margin: 0 0 10px  80px;">输入框</el-radio>
                                    <el-radio label="slider" style="width: 200px;margin: 0 0 10px  80px;">滑块</el-radio>
                                    <el-radio label="check" style="width: 200px;margin: 0 0 10px  80px;">复选框</el-radio>
                                    <el-radio label="radio" style="width: 200px;margin: 0 0 10px  80px;">单选框</el-radio>
                                    <el-radio label="switch" style="width: 200px;margin: 0 0 10px  80px;">开关</el-radio>
                                </div>
                                <div class="default_items">
                                    <el-radio label="colorMultiple"
                                        style="width: 200px;margin: 0 0 10px  80px;">颜色选择器（多）</el-radio>
                                    <el-radio label="defaultTitle"
                                        style="width: 200px;margin: 0 0 10px  80px;">标题</el-radio>
                                    <el-radio label="defaultSize" style="width: 200px;margin: 0 0 10px  80px;">字体</el-radio>
                                    <el-radio label="defaultColor"
                                        style="width: 200px;margin: 0 0 10px  80px;">颜色</el-radio>
                                    <el-radio label="defaultAngle"
                                        style="width: 200px;margin: 0 0 10px  80px;">旋转角度</el-radio>
                                    <el-radio label="text" style="width: 200px;margin: 0 0 10px  80px;">文本</el-radio>
                                    <el-radio label="defaultRadio"
                                        style="width: 200px;margin: 0 0 10px  80px;">常用单选框</el-radio>
                                    <el-radio label="defaultSelect"
                                        style="width: 200px;margin: 0 0 10px  80px;">数字下拉组件</el-radio>
                                    <el-radio label="abundance" style="width: 200px;margin: 0 0 10px  80px;">丰度取值</el-radio>
                                    <el-radio label="doubleColor"
                                        style="width: 200px;margin: 0 0 10px  80px;">颜色（双）</el-radio>
                                    <el-radio label="mutualExclusion"
                                        style="width: 200px;margin: 0 0 10px  80px;">互斥下拉框</el-radio>
                                    <el-radio label="defaultSize2"
                                        style="width: 200px;margin: 0 0 10px  80px;">字体2</el-radio>
                                </div>
                            </el-radio-group>
                            <div class="custom_component">自定义组件</div>
                            <div class="common_component">常用组件</div>
                        </div>

                        <!-- 下拉组件 -->
                        <div class="vies_items" v-if="documentRadio == 'select'">
                            <el-select v-model.trim="selectValue" placeholder="请选择" style="width: 200px;">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="vies_items" v-if="documentRadio == 'defaultSelect'">
                            <el-select v-model.trim="defaultSelect" placeholder="请选择" style="width: 200px;">
                                <el-option v-for="item in 20" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </div>
                        <!-- 下拉组件（多） -->
                        <div class="vies_items" v-if="documentRadio == 'selectMultiple'">
                            <el-select v-model.trim="selectValue" placeholder="请选择" style="width: 100px;">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model.trim="selectValue" placeholder="请选择" style="width: 100px;">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <!-- 颜色选择器 -->
                        <div class="vies_items_color vies_items" v-if="documentRadio == 'color'">
                            <el-color-picker v-model.trim="color" style="float: left;"></el-color-picker>
                            <span>{{ color }}</span>
                        </div>
                        <!-- 文本 -->
                        <div v-if="documentRadio == 'text'">
                            文本
                        </div>
                        <!-- 互斥下拉框 -->
                        <div v-if="documentRadio == 'mutualExclusion'">
                            <template v-for="(item, index) in mutualExclusion">
                                <el-select v-model="item.value" placeholder="请选择">
                                    <el-option v-for="opt in mutualExclusionOptions" :key="opt.value" :label="opt.label"
                                        :value="opt.value" :disabled="setDisabled(opt, index)"></el-option>
                                </el-select>
                            </template>
                        </div>
                        <!-- 丰度取值 -->
                        <div v-if="documentRadio == 'abundance'" class="top_item">
                            <el-row>
                                <el-col :span="20">
                                    <el-input v-model.trim="abundance">
                                        <template slot="prepend">TOP</template>
                                    </el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-tooltip class="item" effect="dark" placement="top">
                                        <div slot="content">提示语</div>
                                        <i class="el-icon-question"
                                            style="margin-left: 15px;transform: translateY(6px);"></i>
                                    </el-tooltip>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 颜色选择器(多) -->
                        <div class="vies_items">
                            <div class="colorMultiple " v-if="documentRadio == 'colorMultiple'">
                                <div class="btn_replace">
                                    <div class="replace_main">
                                        <div class="replace" @click="selectOnClick">
                                            <div>
                                                <span v-for="(item, index) in replaceColorList" :key="index"
                                                    :style="`backgroundColor:${item}`"></span>
                                            </div>
                                            <b>{{ value }}</b>
                                            <i class="el-icon-arrow-down"></i>
                                        </div>
                                        <el-select v-model.trim="value" ref="select">
                                            <el-option v-for="item in selectColorList" :key="item.value" :label="item.label"
                                                :value="item.value">
                                                <span class="colorSelect">
                                                    <span v-for="(i, y) in item.content.filter((item, index) => index < 7)"
                                                        :key="y" :style="`backgroundColor:${i}`"></span>
                                                    <b>{{ item.label }}</b>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 输入框 -->
                        <div v-if="documentRadio == 'input'" class="vies_items">
                            <el-input></el-input>
                        </div>
                        <!-- 滑块 -->
                        <div v-if="documentRadio == 'slider'" class="vies_items">
                            <div class="breach_div">
                                <el-tooltip class="item" effect="dark" content="提示语" placement="top">
                                    <span class="breach_div_icon">
                                        <i class="el-icon-question"></i>

                                    </span>
                                </el-tooltip>

                                <div class="breach_div_slider">
                                    <!-- :marks="marks" -->
                                    <el-slider v-model.trim="breach" :max="360" :min="1" :step="1"></el-slider>
                                    <!-- <el-input :disabled="true" class="breach_div_input"
                                            v-model.trim="form.breach"></el-input> -->
                                </div>
                            </div>
                        </div>
                        <!-- 复选框 -->
                        <div v-if="documentRadio == 'check'" class="vies_items">
                            <el-checkbox-group v-model.trim="checkList">
                                <el-checkbox label="0">label1</el-checkbox>
                                <el-checkbox label="1">label2</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <!-- 单选框 -->
                        <div v-if="documentRadio == 'radio'" class="vies_items">
                            <el-radio-group v-model.trim="exampleRadio">
                                <el-radio :label="3">label</el-radio>
                                <el-radio :label="6">label2</el-radio>
                                <el-radio :label="9">label3</el-radio>
                            </el-radio-group>
                        </div>
                        <!-- 常用单选框 -->
                        <div v-if="documentRadio == 'defaultRadio'" class="vies_items">
                            <el-radio-group v-model.trim="defaultRadio">
                                <el-radio :label="0">是</el-radio>
                                <el-radio :label="1">否</el-radio>
                            </el-radio-group>
                        </div>
                        <!-- 开关 -->
                        <div v-if="documentRadio == 'switch'" class="vies_items">
                            <el-switch v-model.trim="switchValue" active-text="右侧文本" inactive-text="左侧文本">
                            </el-switch>
                        </div>
                        <!-- 标题 -->
                        <div v-if="documentRadio == 'defaultTitle'" class="vies_items">
                            <el-form-item label="标题：">
                                <el-input></el-input>
                            </el-form-item>
                        </div>
                        <!-- 字体 -->
                        <div v-if="documentRadio == 'defaultSize'" class="vies_items">
                            <el-form-item label="字体：">
                                <el-row>
                                    <el-col :span="12">
                                        <el-select v-model.trim="defaultFontFamily" filterable>
                                            <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                :value="item.value" :key="index"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-select v-model.trim="defaultFontSize">
                                            <el-option v-for="(item, index) in SizeOptions" :label="item" :value="item"
                                                :key="index"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="weight">
                                            B
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="italic">
                                            I
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </div>
                        <!--  字体2 -->
                        <div v-if="documentRadio == 'defaultSize2'" class="vies_items">
                            <el-form-item label="字体：">
                                <el-row>
                                    <el-col :span="14">
                                        <el-select v-model.trim="defaultFontFamily" filterable>
                                            <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                :value="item.value" :key="index"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">
                                        <div class="weight">
                                            B
                                        </div>
                                    </el-col>
                                    <el-col :span="5">
                                        <div class="italic">
                                            I
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </div>
                        <!-- 颜色 -->
                        <el-form-item label="颜色：" v-if="documentRadio == 'defaultColor'">
                            <div class="vies_items_color vies_items">
                                <el-color-picker v-model.trim="defaultColor" style="float: left;"></el-color-picker>
                                <span>{{ defaultColor }}</span>
                            </div>
                        </el-form-item>
                        <!-- 旋转角度 -->
                        <div v-if="documentRadio == 'defaultAngle'" class="vies_items">
                            <el-form-item label="旋转角度：">
                                <el-select v-model.trim="defaultRotateOptions" filterable>
                                    <el-option v-for="(item, index) in RotateOptions" :label="item" :value="item"
                                        :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div v-if="documentRadio == 'doubleColor'" class="vies_items">
                            <el-color-picker v-model="doubleColor1"></el-color-picker>
                            <el-color-picker v-model="doubleColor2"></el-color-picker>
                        </div>
                    </div>
                </div>
                <div class="config_view">
                    <template>
                        <el-tabs v-model.trim="activeName">
                            <el-tab-pane label="文件上传" name="file">
                                <div class="group_adjust">
                                    <span>分组调整:</span>
                                    <div>
                                        <el-checkbox-group v-model="menuConfigForm.initialIsGroup">
                                            <el-checkbox label="是"></el-checkbox>
                                            <el-checkbox label="否"></el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>
                                <div class="group_adjust">
                                    <span>Y 轴分组:</span>
                                    <div>
                                        <el-checkbox-group v-model="menuConfigForm.initialIsGroupY">
                                            <el-checkbox label="是"></el-checkbox>
                                            <el-checkbox label="否"></el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>

                                <div class="plus_config">
                                    <el-button icon="el-icon-plus" style="margin-bottom: 8px;"
                                        @click="addFiles"></el-button>
                                </div>
                                <!-- 上传组件 -->
                                <div class="config_file_item" v-for="(item, index) in menuConfigForm.fileList" :key="index">
                                    <div @click="deleteFile(item.id)">
                                        <i class="el-icon-error danger"></i>
                                    </div>
                                    <el-input v-model.trim="menuConfigForm.fileForm[item.id].title"
                                        style="width: 200px;margin-bottom: 10px;" placeholder="文件名称"
                                        :disabled="item.id == 'defalut'"></el-input>
                                    <el-input v-model.trim="menuConfigForm.fileForm[item.id].code" style="width: 200px;"
                                        placeholder="组件code" :disabled="item.id == 'defalut'"></el-input>
                                    <!-- 这里加下拉文件格式选择 -->
                                    <el-select v-model="menuConfigForm.fileForm[item.id].format" placeholder="请选择文件内容格式">
                                        <el-option v-for="item in formatOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="menuConfigForm.fileForm[item.id].type" placeholder="请选择文件上传类型"
                                        v-if="index">
                                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <div class="file_config">
                                        <el-input style="width: 200px;" :disabled="true"></el-input>
                                        <div class="upload">上传</div>
                                        <div class="document">预览</div>
                                    </div>
                                </div>
                                <div class="primary">开始绘图</div>
                            </el-tab-pane>
                            <el-tab-pane label="图表调整" name="config">
                                <div class="plus_config">
                                    <el-button icon="el-icon-plus" style="margin-bottom: 8px;"
                                        @click="addDocument"></el-button>
                                </div>
                                <!-- 设置列表 -->
                                <template v-for="(label, index) in menuConfigForm.configList">
                                    <div class="config_file_item" :ref="`config${label.id}`">
                                        <span style="font-size: 20px;font-weight: 700;">设置名称：</span>
                                        <el-input style="width: 200px;margin-bottom: 5px;padding-bottom: 10px;"
                                            v-model.trim="menuConfigForm.configForm[label.id].title"></el-input>
                                        <div @click="delectConfigList(label.id)">
                                            <i class="el-icon-error danger"></i>
                                        </div>
                                        <div class="div_add">
                                            <el-button icon="el-icon-plus" style="padding: 5px;margin: 5px;"
                                                @click="addItemsList(label.id)"></el-button>
                                        </div>
                                        <!-- 组件列表 -->
                                        <div v-for="(item, index) in menuConfigForm.configForm[label.id].config"
                                            class="parent_sort">
                                            <!-- 下拉组件单 -->
                                            <div v-if="item.type == 'select'" class="type_list">
                                                <h3>下拉组件</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>下拉label：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" placeholder="文本，逗号分隔"
                                                    v-model.trim="item.label"></el-input>
                                                <br>
                                                <span>下拉value：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.value"
                                                    :type="'text'"
                                                    @input="val => item.value = val.replace(/[^a-zA-Z0-9_.,，]/g, '')"
                                                    placeholder="值，逗号分隔"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线和逗号"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" :type="'text'"
                                                    @input="val => item.default = val.replace(/[^a-zA-Z0-9_.]/g, '')"
                                                    placeholder="value中任选(单个)"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                            </div>
                                            <!-- 丰度取值 -->
                                            <div v-if="item.type == 'abundance'" class="type_list">
                                                <h3>丰度取值</h3>
                                                <!-- <span>组件名称：</span> -->
                                                <!-- <el-input style="width: 200px;margin-bottom: 5px;"
                                                        v-model.trim="item.title"></el-input>
                                                    <br> -->
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default"></el-input>
                                                <br>
                                                <span>提示文本：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.tooltip"></el-input>
                                                <br>
                                                <span>取值上限：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.value"
                                                    @input="val => item.value = val.replace(/[^0-9]/g, '')"></el-input>
                                            </div>
                                            <!-- 数字下拉组件 -->
                                            <div v-if="item.type == 'defaultSelect'" class="type_list">
                                                <h3>下拉组件</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>下拉label：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" placeholder="最小值,最大值,步长"
                                                    v-model.trim="item.label"></el-input>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" placeholder="请输入默认值"></el-input>
                                            </div>

                                            <!-- 下拉组件多 -->
                                            <div v-if="item.type == 'selectMultiple'">
                                                <h3>下拉组件（双）</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code2"
                                                    :type="'text'"
                                                    @input="val => item.code2 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>下拉label：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" placeholder="文本，逗号分隔"
                                                    v-model.trim="item.label"></el-input>
                                                <el-input style="width: 200px;margin-bottom: 5px;" placeholder="文本，逗号分隔"
                                                    v-model.trim="item.label2"></el-input>
                                                <br>
                                                <span>下拉value：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.value"
                                                    :type="'text'"
                                                    @input="val => item.value = val.replace(/[^a-zA-Z0-9_,，]/g, '')"
                                                    placeholder="值，逗号分隔"></el-input>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.value2" :type="'text'"
                                                    @input="val => item.value2 = val.replace(/[^a-zA-Z0-9_,，]/g, '')"
                                                    placeholder="值，逗号分隔"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线和逗号"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" :type="'text'"
                                                    @input="val => item.default = val.replace(/[^a-zA-Z0-9_]/g, '')"
                                                    placeholder="value中任选(单个)"></el-input>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default2" :type="'text'"
                                                    @input="val => item.default2 = val.replace(/[^a-zA-Z0-9_]/g, '')"
                                                    placeholder="value中任选(单个)"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                            </div>
                                            <!-- 颜色选择器（单） -->
                                            <div v-if="item.type == 'color'">
                                                <h3>颜色选择器（单）</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-color-picker v-model.trim="item.default"
                                                    style="transform: translateY(15px);margin-bottom: 15px;"></el-color-picker>
                                            </div>
                                            <!-- 颜色选择器（多） -->
                                            <div v-if="item.type == 'colorMultiple'">
                                                <h3>颜色选择器（多）</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <div style="padding-top:6px">
                                                    <span class="defalut_title">&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                    <div class="btn_replace defalut">
                                                        <div class="replace_main">
                                                            <div class="replace" @click="selectReplace(item.id)">
                                                                <div>
                                                                    <span v-for="(item, index) in replaceColorList"
                                                                        :key="index"
                                                                        :style="`backgroundColor:${item}`"></span>
                                                                </div>
                                                                <b>{{ item.default }}</b>
                                                                <i class="el-icon-arrow-down"></i>
                                                            </div>
                                                            <el-select v-model.trim="item.default" :ref="`select${item.id}`"
                                                                @change="changeReplace">
                                                                <el-option v-for="i in selectColorList" :key="i.value"
                                                                    :label="i.label" :value="i.value">
                                                                    <span class="colorSelect">
                                                                        <span
                                                                            v-for="(n, m) in i.content.filter((item, index) => index < 7)"
                                                                            :key="m" :style="`backgroundColor:${n}`"></span>
                                                                        <b>{{ i.label }}</b>
                                                                    </span>
                                                                </el-option>
                                                            </el-select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 输入框 -->
                                            <div v-if="item.type == 'input'">
                                                <h3>输入框</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" placeholder="默认值，可为空"></el-input>
                                            </div>
                                            <!-- 滑块 -->
                                            <div v-if="item.type == 'slider'">
                                                <h3>滑块</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>标记范围：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.radius" placeholder="逗号分隔"></el-input>
                                                <br>
                                                <span>提示文本：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.tooltip"></el-input>
                                                <br>
                                                <span>滑动步长：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.step"></el-input>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" placeholder="默认值（标记范围中取值）"></el-input>
                                            </div>
                                            <!-- 复选框 -->
                                            <div v-if="item.type == 'check'">
                                                <h3>复选框</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>组件label：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" placeholder="文本,逗号分隔"
                                                    v-model.trim="item.label"></el-input>
                                                <br>
                                                <span>组件value：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.value"
                                                    :type="'text'"
                                                    @input="val => item.value = val.replace(/[^a-zA-Z0-9_,，]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线和逗号"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" :type="'text'"
                                                    @input="val => item.default = val.replace(/[^a-zA-Z0-9_,，]/g, '')"
                                                    placeholder="value中取值多个逗号分隔"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线和逗号"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                            </div>
                                            <!-- 单选框 -->
                                            <div v-if="item.type == 'radio'">
                                                <h3>单选框</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>组件label：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" placeholder="文本,逗号分隔"
                                                    v-model.trim="item.label"></el-input>
                                                <br>
                                                <span>组件value：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" placeholder="值,逗号分隔"
                                                    v-model.trim="item.value"></el-input>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" placeholder="value中任选(单个)"></el-input>
                                            </div>
                                            <!-- 是否单选框 -->
                                            <div v-if="item.type == 'defaultRadio'">
                                                <h3>常用单选框</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" :type="'text'"
                                                    @input="val => item.default = val.replace(/[^0,1]/g, '')"
                                                    placeholder="格式：0或1"></el-input>
                                                <el-tooltip class="item" effect="dark" content="0代表否,1代表是"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                            </div>
                                            <!-- 开关 -->
                                            <div v-if="item.type == 'switch'">
                                                <h3>开关</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>

                                                <br>
                                                <span>左侧文本：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.value2"></el-input>
                                                <br>
                                                <span>右侧文本：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.value"></el-input>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" :type="'text'"
                                                    @input="val => item.default = val.replace(/[^0,1]/g, '')"
                                                    placeholder="格式：0或1"></el-input>
                                                <el-tooltip class="item" effect="dark" content="0代表关,1代表开"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                            </div>
                                            <!-- 标题 -->
                                            <div v-if="item.type == 'defaultTitle'">
                                                <h3>标题</h3>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.default" placeholder="默认值"></el-input>
                                            </div>
                                            <!-- 字体2 -->
                                            <div v-if="item.type == 'defaultSize2'" class="defaultSize">
                                                <h3>字体</h3>
                                                <span>字体类型编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>是否加粗编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code3"
                                                    :type="'text'"
                                                    @input="val => item.code3 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>是否倾斜编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code4"
                                                    :type="'text'"
                                                    @input="val => item.code4 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>字体默认值：</span>
                                                <el-select v-model.trim="item.default" filterable>
                                                    <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                        :value="item.value" :key="index"></el-option>
                                                </el-select>
                                                <br>
                                                <span>加粗默认值：</span>
                                                <el-select v-model.trim="item.default3">
                                                    <el-option v-for="(item, index) in weightOptions" :label="item.label"
                                                        :value="item.value" :key="index"></el-option>
                                                </el-select>
                                                <br>
                                                <span>字体默认值：</span>
                                                <el-select v-model.trim="item.default4">
                                                    <el-option v-for="(item, index) in weightOptions" :label="item.label"
                                                        :value="item.value" :key="index"></el-option>
                                                </el-select>
                                            </div>
                                            <!-- 字体 -->
                                            <div v-if="item.type == 'defaultSize'" class="defaultSize">
                                                <h3>字体</h3>
                                                <span>字体类型编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>字体大小编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code2"
                                                    :type="'text'"
                                                    @input="val => item.code2 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>是否加粗编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code3"
                                                    :type="'text'"
                                                    @input="val => item.code3 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>是否倾斜编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code4"
                                                    :type="'text'"
                                                    @input="val => item.code4 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>字体默认值：</span>
                                                <el-select v-model.trim="item.default" filterable>
                                                    <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                        :value="item.value" :key="index"></el-option>
                                                </el-select>
                                                <br>
                                                <span>大小默认值：</span>
                                                <el-select v-model.trim="item.default2">
                                                    <el-option v-for="(item, index) in SizeOptions" :label="item"
                                                        :value="item" :key="index"></el-option>
                                                </el-select>
                                                <br>
                                                <span>加粗默认值：</span>
                                                <el-select v-model.trim="item.default3">
                                                    <el-option v-for="(item, index) in weightOptions" :label="item.label"
                                                        :value="item.value" :key="index"></el-option>
                                                </el-select>
                                                <br>
                                                <span>字体默认值：</span>
                                                <el-select v-model.trim="item.default4">
                                                    <el-option v-for="(item, index) in weightOptions" :label="item.label"
                                                        :value="item.value" :key="index"></el-option>
                                                </el-select>
                                            </div>
                                            <!-- 颜色 -->
                                            <div v-if="item.type == 'defaultColor'">
                                                <h3>颜色</h3>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>
                                                <el-color-picker v-model.trim="item.default"
                                                    style="transform: translateY(15px);margin-bottom: 15px;"></el-color-picker>
                                            </div>
                                            <!-- 颜色 -->
                                            <div v-if="item.type == 'text'">
                                                <h3>文本</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                            </div>
                                            <!-- 互斥下拉框 -->
                                            <div v-if="item.type == 'mutualExclusion'">
                                                <h3>互斥下拉框</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.code"></el-input>
                                            </div>
                                            <!-- 旋转角度 -->
                                            <div v-if="item.type == 'defaultAngle'" class="defaultSize">
                                                <h3>旋转角度</h3>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默&nbsp;认&nbsp;值&nbsp;：</span>

                                                <el-select v-model.trim="item.default" filterable>
                                                    <el-option v-for="(item, index) in RotateOptions" :label="item"
                                                        :value="item" :key="index"></el-option>
                                                </el-select>
                                            </div>
                                            <!-- 颜色提取器（双） -->
                                            <div v-if="item.type == 'doubleColor'">
                                                <h3>颜色（双）</h3>
                                                <span>组件名称：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;"
                                                    v-model.trim="item.title"></el-input>
                                                <br>
                                                <span>组件编码：</span>
                                                <el-input style="width: 200px;margin-bottom: 5px;" v-model.trim="item.code"
                                                    :type="'text'"
                                                    @input="val => item.code = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                                                <el-tooltip class="item" effect="dark" content="只能输入英文字母数字和下划线"
                                                    placement="right">
                                                    <i class="el-icon-info" style="margin-left:5px"></i>
                                                </el-tooltip>
                                                <br>
                                                <span>&nbsp;默认值(1)：</span>
                                                <el-color-picker v-model.trim="item.default"
                                                    style="transform: translateY(15px);margin-bottom: 15px;"></el-color-picker>
                                                <el-color-picker v-model.trim="item.default2"
                                                    style="transform: translateY(15px);margin-bottom: 15px;"></el-color-picker>
                                            </div>

                                            <div style="margin-top: 20px;" class="sort_dom">
                                                <i class="el-icon-delete" @click="deleteItems(index, label.id)"></i>
                                                <i class="el-icon-caret-top" @click="movePosition('on', index, label.id)"
                                                    v-show="index !== 0"></i>
                                                <i class="el-icon-caret-bottom"
                                                    @click="movePosition('down', index, label.id)"
                                                    v-show="index !== menuConfigForm.configForm[label.id].config.length - 1"></i>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <div class="primary">更新绘图</div>
                            </el-tab-pane>
                            <el-tab-pane label="图表说明" name="illustrate">
                                <div class="illustrate_chart">
                                    <!-- <el-form-item label="分析要求">
                                            <el-input v-model.trim="menuConfigForm.requirement" style="width: 600px;"
                                                placeholder="请输入分析要求" type="textarea" :rows="5"></el-input>
                                        </el-form-item>
                                        <el-form-item label="图注">
                                            <el-input v-model.trim="menuConfigForm.illustration" style="width: 600px;"
                                                placeholder="请输入图注" type="textarea" :rows="5"></el-input>
                                        </el-form-item>
                                        <el-form-item label="表注">
                                            <el-input v-model.trim="menuConfigForm.statement" style="width: 600px;"
                                                placeholder="请输入表注" type="textarea" :rows="5"></el-input>
                                        </el-form-item> -->
                                    <el-upload class="upload-demo" drag :file-list="pictureList" action=""
                                        :on-change="changeUpload" :on-remove="removePictureList"
                                        :before-remove="beforeRemove" :http-request="pictureListUpload" list-type="picture"
                                        ref="upload">
                                        <i class="el-icon-upload"></i>
                                        <!-- multiple -->
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    </el-upload>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="说明书" name="specification">
                                <div class="illustrate_chart">
                                    <el-upload class="upload-demo" drag :file-list="pictureList2" action=""
                                        :on-change="changeUpload2" :on-remove="removePictureList2"
                                        :before-remove="beforeRemove" :http-request="pictureListUpload2" list-type="picture"
                                        ref="upload">
                                        <i class="el-icon-upload"></i>
                                        <!-- multiple -->
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    </el-upload>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="图绘简介" name="tip" v-if="role !== '超级管理员' && role !== '管理员'">
                                <div class="illustrate_chart">
                                    <el-input type="textarea" placeholder="请输入图绘简介" v-model="menuConfigForm.tips"
                                        :rows="8" />
                                    <!--  maxlength="30" show-word-limit -->
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import { deepClone } from '@/utils'
import {
    getDrawPageListRequest,
    addDirectoryRequest,
    modifyDirectoryRequest,
    deleteDirectoryRequest,
    addMenuRequest,
    modifyMenuRequest,
    deleteMenuRequest,
    saveMenuSettingRequest,
    changeMenuStatusRequest,
    getMenuSettingRequest,
    getCloudPicturePublishChooseOptionRequest,
    updateCloudPicturePublishStatusRequest
} from '@/api/user'
import {
    getRoleSelectListRequest,
    getHasShareUserListRequest,
    modifyShareUserRequest,
    searchShareUserInfoRequest
} from '@/api/management'
import {
    uploadScriptFileRequest,
    deleteScriptFileRequest,
    downloadScriptRequest,
    getCloneMenuListRequest,
    getNewConfigCloneMenuListRequest,
    chartFileRequest,
    delChartFileRequest,
    gifFileRequest,
    delGifFileRequest,
    saveCloudToolConfigRequest
} from '@/api/tools'
export default {
    name: 'GenescloudUiIndex',
    props: {
        editRow: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            role: JSON.parse(localStorage.getItem('userInfo')).role,
            activeName: 'file',
            dialogVisible: false,
            downloadWidth: '400px',
            downloadItems: null,
            //菜单配置
            menuConfigForm: {
                title: null,          //工具名
                fileForm: {},         //文件子组件配置
                fileList: [],         //文件
                configList: [],       //图表
                configForm: {},       //图表子组件配置
                downloadItem: [],     //下载格式选择
                scriptCommand: '',     //脚本执行命令
                initialIsGroup: [],    //分组调整
                initialIsGroupY: [],     //Y轴分组添加
                tips: null,              //图绘简介
            },
            typeOptions: [
                {
                    label: '单文件上传',
                    value: 'singleFile'
                },
                {
                    label: '多文件上传',
                    value: 'multifile'
                },
            ],



            pictureList: [],
            pictureList2: [],
            mutualExclusion: [
                { value: '' },
                { value: '' },
            ],
            mutualExclusionOptions: [
                {
                    value: '选项1',
                    label: '选项1'
                }, {
                    value: '选项2',
                    label: '选项2'
                }, {
                    value: '选项3',
                    label: '选项3'
                }, {
                    value: '选项4',
                    label: '选项4'
                }, {
                    value: '选项5',
                    label: '选项5'
                }
            ],
            // 示例参数
            fontOptions: this.$publicData('fontFamily'),
            RotateOptions: this.$publicData('rotate'),
            SizeOptions: this.$publicData('fontSize'),
            doubleColor2: '#000000',
            doubleColor1: '#000000',
            weightOptions: [
                {
                    label: '是',
                    value: 1
                },
                {
                    label: '否',
                    value: 0
                }
            ],
            documentRadio: 'select',
            abundance: 10,
            options: [
                {
                    value: 'value',
                    label: 'label'
                }
            ],
            breach:0,
            selectValue: '',
            color: '#23896d',
            defaultColor: '#23896d',
            replaceColorList: [],
            defaultFontFamily: 'Arial',
            defaultSelect: 5,
            defaultFontSize: 16,
            defaultRotateOptions: 30,
            selectColorList: this.$publicData('colorList'),
            value: 'Science',
            marks: {
                1: '1',
                360: '360'
            },
            checkList: ['lebel1', 'lebel2'],
            exampleRadio: 3,
            defaultRadio: 0,
            switchValue: true,
            formatOptions: [
                {
                    value: 'tabulation',
                    label: '表格'
                },
                {
                    value: 'text',
                    label: '文本'
                }
            ],
            //控制上传组件回显
            fileList: [],
            uploadList: [],
            menuRules: {
                title: [
                    { required: true, message: '工具名是必填项！', trigger: 'blur' },
                ],
            },
        };
    },
    watch: {
        editRow: {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            deep: true,
            immediate: true
        },
    },
    computed: {
        setDisabled() {
            return function (opt, index) {
                // opt为每项option，index为el-select索引
                // 全部已选择
                const selectedArr = this.mutualExclusion.map(item => item.value)
                // 删除自己的已选
                //   selectedArr.splice(index, 1)
                // 其它的已选，禁用
                return selectedArr.includes(opt.value)
            }
        }
    },

    methods: {
       async init(row) {
            const res = await getMenuSettingRequest({ pageCode: row.pageCode })
            if (res.code != 200) return this.$message.error('服务器故障,请联系管理员！')
            let result = JSON.parse(res.data)
            if (Object.keys(result).length > 0) {
                this.menuConfigForm = result
                this.fileList = result.scriptFileList
                this.pictureList = result.description
                this.pictureList2 = result.specification
                this.downloadItems = this.menuConfigForm.downloadItem.join(',')
            } else {
                this.menuConfigForm = {
                    title: null,          //工具名
                    fileForm: {
                        defalut: {
                            title: '数据文件',
                            format: 'tabulation',
                            code: 'data'
                        }
                    },         //文件子组件配置
                    fileList: [
                        {
                            id: 'defalut'
                        }
                    ],         //文件
                    configList: [],       //图表
                    configForm: {},       //图表子组件配置
                    downloadItem: [],      //下载格式选择
                    initialIsGroup: [],       //分组调整组件
                    initialIsGroupY: [],      //添加Y轴分组
                    tips: null                  //图绘简介
                }
                this.fileList = []
                this.downloadItems = null
            }
        },
        async handleRemove(file, fileList) {
            const res = await deleteScriptFileRequest({
                cloudPictureCode: this.editRow.pageCode,
                fileName: file.name
            })
            if (res.code !== 200) {
                this.$message.error(res.message)
            }
            this.handleConfig(this.editRow)
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        async handleUpload(file) {
            const formData = new FormData();
            formData.append('file', file.file);
            const res = await uploadScriptFileRequest(this.editRow.pageCode, formData)
            if (res.code !== 200) return this.$message.error(res.message)
            this.fileList.push({ name: file.file.name })
        },
        //删除图表说明
        async removePictureList(file) {
            const res = await delChartFileRequest({
                pageCode: this.editRow.pageCode,
            })
            this.handleConfig(this.editRow)
        },
        //删除说明书
        async removePictureList2(file) {
            const res = await delGifFileRequest({
                pageCode: this.editRow.pageCode,
            })
            this.handleConfig(this.editRow)
        },
        //图表说明上传
        async pictureListUpload(file) {
            const formData = new FormData();
            formData.append('file', file.file);
            // console.log(file.file,'file');
            const res = await chartFileRequest(this.editRow.pageCode, formData)
            if (res.code !== 200) return this.$message.error(res.message)
        },
        //说明书上传
        async pictureListUpload2(file) {
            const formData = new FormData();
            formData.append('file', file.file);
            const res = await gifFileRequest(this.editRow.pageCode, formData)
            if (res.code !== 200) return this.$message.error(res.message)
        },
        changeUpload(file, fileList) {
            if (fileList.length > 1) {
                fileList.splice(0, 1);
            }
            this.pictureList = fileList
        },
        changeUpload2(file, fileList) {
            if (fileList.length > 1) {
                fileList.splice(0, 1);
            }
            this.pictureList2 = fileList
        },
        //改变位置
        movePosition(position, index, id) {
            let arr = this.menuConfigForm.configForm[id].config
            if (position == 'on') {
                //向上排序
                let temp = arr[index]
                arr[index] = arr[index - 1]
                arr[index - 1] = temp
            } else {
                //向下排序
                let temp = arr[index]
                arr[index] = arr[index + 1]
                arr[index + 1] = temp
            }
            this.$forceUpdate();
        },
        //默认值选取
        defaultSelection(type) {
            if (type == 'color' || type == 'defaultColor' || type == 'doubleColor') {
                return '#000000'
            } else if (type == 'abundance') {
                return 10
            } else {
                return ''
            }
        },
        onPreview(value) {
            window.open(`${this.$url(window.location.origin)}/scriptPage?name=${value.name}&pageCode=${this.editRow.pageCode}&page=chartview`)
        },
        //下载脚本信息
        async downloadScript() {
            let pageCode = this.editRow.pageCode
            const res = await downloadScriptRequest({ pageCode })
            this.$dropDown(res, pageCode + '页面脚本.zip')
        },
        iconSelectClick() {
            this.$refs.iconSelect.toggleMenu()
        },

        //删除上传文件组件
        deleteFile(id) {
            if (id === 'defalut') return this.$message.error('必选组件，无法删除！')
            let index = this.menuConfigForm.fileList.findIndex(item => item.id === id)
            this.menuConfigForm.fileList.splice(index, 1)
            this.$delete(this.menuConfigForm.fileForm, id)
        },
        //新增上传文件组件
        addFiles() {
            let num = new Date().getTime()
            this.menuConfigForm.fileList.push({
                id: num,
            })
            this.$set(this.menuConfigForm.fileForm, num, { code: '', title: '', format: 'tabulation', type: 'singleFile' });
        },
        //新增设置
        addDocument() {
            let num = new Date().getTime()
            this.menuConfigForm.configList.push(
                {
                    id: num,
                }
            )
            this.$set(this.menuConfigForm.configForm, num, { title: '', config: [] });
        },
        //删除设置
        delectConfigList(id) {
            let index = this.menuConfigForm.configList.findIndex(item => item.id === id)
            this.menuConfigForm.configList.splice(index, 1)
            this.$delete(this.menuConfigForm.configForm, id)
        },
        addItemsList(id) {
            let item = this.menuConfigForm.configForm[id].config.find(item => item.type == 'colorMultiple')
            if (item && this.documentRadio == 'colorMultiple') {
                return this.$message.error('单页面暂只支持一个多选择颜色器')
            }
            this.menuConfigForm.configForm[id].config.push({
                type: this.documentRadio,
                label: '',
                label2: '',
                title: '',
                code: this.documentRadio == 'text' ? new Date().getTime() : '',
                code2: '',
                code3: '',
                code4: '',
                value: '',
                value2: '',
                tooltip: '',
                radius: '',
                default: this.defaultSelection(this.documentRadio),
                default2: this.defaultSelection(this.documentRadio),
                default3: this.documentRadio == 'defaultSize' || this.documentRadio == 'defaultSize2' ? 0 : '',
                default4: this.documentRadio == 'defaultSize' || this.documentRadio == 'defaultSize2' ? 0 : '',
                step: ''
            })
        },
        deleteItems(index, id) {
            this.menuConfigForm.configForm[id].config.splice(index, 1)
        },
        downloadAdd() {
            this.downloadItems = this.menuConfigForm.downloadItem.join(',')
            this.dialogVisible = false
        },
         //触发下拉事件
         selectOnClick() {
            this.$refs.select.toggleMenu()
        },
        selectReplace(id) {
            this.$refs[`select${id}`][0].toggleMenu()
        },
        changeReplace(value) {
            this.replaceColorList = this.selectColorList.find(item => item.value == value).content.filter((item, index) => index < 7)
            this.value = value
        },
    }
}
</script>

<style lang="scss" scoped>
@import "../editMenu.scss";
</style>